<template>
  <div class="goods-detail">
    <div class="goods-info">
      <div>课程信息确认</div>
      <div class="goods-details">
        <div class="goods-img">
          <img :src="courseInfo.full_cover" alt="" />
        </div>
        <div class="goods">
          <div class="goods-title">{{ courseInfo.title }}</div>
          <div class="goods-time">
            <div class="goods-label">通关答案</div>
            <div class="sub-detail">有效期<span>终生享用</span></div>
            <div class="sub-detail">课时数<span>{{courseInfo.class}}课时</span></div>
            <!-- <div class="sub-detail">购买量<span>1488人</span></div> -->
          </div>
          <div class="goods-price">￥{{ courseInfo.price }}</div>
        </div>
      </div>
      <div class="order-content">
        <div class="content-box">
          <div class="content-title">联系方式（选填）</div>
          <el-input
            v-model="phone"
            maxlength="11"
            placeholder="输入手机号码"
          ></el-input>
        </div>
        <div class="content-box">
          <div class="content-title">请选择支付方式</div>
          <div class="pay-type">
            <div
              class="type-item"
              :class="item.ischecked ? 'type-checked' : ''"
              v-for="item in payTypeList"
              :key="item.value"
              @click="checkedPayType(item)"
            >
              <img :src="item.img" alt="" />
              <span>{{ item.label }}</span>
            </div>
          </div>
        </div>
        <div class="content-box">
          <div class="content-title">购买须知</div>
          <div class="buy-know">
            购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购，买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买
            须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买须知内
            容购买须知内容购买须知内容购买须知内容购，买须知内容购买须知内容购买须知内容购买须知内容购买须知内容购买。
          </div>
        </div>
      </div>
      <el-button @click="gotoPay">确认支付</el-button>
    </div>
  </div>
</template>
<script>
import { getvideoDetails } from '@/api/index.js'
import { getExcellentdetails } from '@/api/course.js'
import { createOrderDY,orderPayWx,createGoodOrders,orderPayWxyx } from '@/api/pay.js'
export default {
  name: "ConfirmOrder",
  data() {
    return {
      payTypeList: [
        {
          value: 1,
          label: "微信支付",
          img: require("@/assets/wechat.png"),
          ischecked: true,
        },
        {
          value: 2,
          label: "支付宝支付",
          img: require("@/assets/zfb.png"),
          ischecked: false,
        },
      ],
      phone: "",
      goodsInfo: {
        id: 8,
        title: "科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧",
        img: require("@/assets/keer.png"),
        time: "4",
        price: "180.00",
      },
      courseInfo:{},
      paytype:1
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.init(this.id)
  },
  methods: {
    init(id){
      let that = this
      getExcellentdetails(id).then(res=>{
        // console.log(566,res)
        that.courseInfo = res.data
      })
    },
    checkedPayType(item) {
      this.payTypeList.forEach((ele) => {
        ele.ischecked = false;
      });
      item.ischecked = true;
      if (item.label =='微信支付') {
        this.paytype = 1
      }
      if (item.label =='支付宝支付') {
        this.paytype = 2
      }
    },
    gotoPay(){
      // this.$router.push('/OrderDetail')
      let that = this
      // createOrderDY({video_course_id:that.courseInfo.id}).then(res=>{
      //   // console.log(88,res)
      //   orderPayWx({order_no:res.data.order_no}).then(res1=>{
      //     console.log(99,res1)
      //   })
      // })
      createGoodOrders({excellent_course_id:that.courseInfo.id}).then(res=>{
        if(res.code == 200 && that.paytype == 1) {
          this.$router.push({
            path:'/orderPay',
            query:{
              params:JSON.stringify(res.data)
            }
          })
        }
        if(res.code == 200 && that.paytype == 2) {
          this.$router.push({
            path:'/orderPay',
            query:{
              orderId: res.data.id
            }
          })
        }
      })
    }
   
  },
};
</script>
      
<style lang="scss">
.el-input__inner {
  border: none;
  font-size: 0.8vw;
  height: 3vh;
  padding: 0;
}
.el-tabs__item:hover {
  color: #2ac092;
}
.el-tabs__active-bar {
  background-color: #2ac092;
  height: 0.4vh;
  bottom: 0.5vh;
  left: 0.6vw;
  border-radius: 20px;
  width: 15% !important;
}
.el-tabs__item.is-active {
  color: #333 !important;
}
.el-tabs__item {
  padding: 1vh 2vw !important;
  height: auto !important;
  color: #666;
  font-size: 1vw;
}
.confirmButton {
  background-color: #fff !important;
  color: #2ac092 !important;
}
.cancelButton {
  background-color: #fff !important;
  color: #666666 !important;
}
.goods-detail {
  height: 86.1vh;

  .goods-info {
    padding: 1.5%;
    border-radius: 15px;
    margin: 1.5% 12.5%;
    background-color: #fff;

    .goods-details {
      display: flex;
      margin-top: 2vh;
      padding-bottom: 1.5%;
      border-bottom: 1px solid #e6e6e6;

      .goods-img {
        width: 17.2vw;
        height: 23.3vh;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 1.6vw;

        > img {
          width: 100%;
          height: 100%;
        }
      }

      .goods {
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        width: 75%;

        .goods-title {
          font-size: 1vw;
          font-weight: bold;
        }

        .goods-time {
          margin: 2vh 0;
          font-size: 0.8vw;
          color: #999999;
          display: flex;

          .goods-label {
            font-size: 0.6vw;
            padding: 0.2vh 0.3vw;
            background-color: #defcf3;
            border-radius: 5px;
            border: 1px solid;
            color: #2ac092;
          }

          .sub-detail {
            margin-left: 2vw;

            > span {
              color: #333333;
              margin-left: 0.5vw;
            }
          }
        }
        .goods-price {
          font-size: 0.9vw;
          background: #f5f5f5;
          color: #ff6d6a;
          font-weight: bold;
          padding: 1% 0.5%;
          margin-bottom: 3vh;
        }

        .down-print {
          font-size: 1vw;
          color: #333;
          padding: 1% 0.5%;
          display: flex;

          .down-item {
            display: flex;
            align-items: center;
            margin-right: 1vw;
            cursor: pointer;
            user-select: none;

            > img {
              width: 1vw;
              height: 2vh;
              margin-right: 0.2vw;
            }
          }
        }
      }
    }
  }
}

.order-content {
  padding: 1.5vh 0.5vw;
  margin-bottom: 10vh;

  .content-box {
    margin: 0.8vh 0;

    .content-title {
      margin-bottom: 1vh;
    }

    .buy-know {
      color: #999999;
    }

    .pay-type {
      display: flex;

      .type-item {
        display: flex;
        align-items: center;
        padding: 1vh 1.5vw;
        border: 1px solid #e6e6e6;
        margin-right: 0.5vw;
        border-radius: 5px;
        cursor: pointer;
        width: 6vw;

        > img {
          width: 1vw;
          height: 2vh;
          margin-right: 0.3vw;
        }
      }
      .type-checked {
        border: 1px solid #2ac092;
      }
    }
  }
}
.el-button {
  background: #2ac092;
  color: #fff;
  padding: 1.5vh 2vw !important;
  font-size: 1vw;
}

.course-list {
  margin-top: 4vh;
  padding: 0 12.5%;

  .list-box {
    background-color: #fff;
    border-radius: 10px;

    .list-title {
      font-size: 1vw;
      padding: 3vh 2vw;

      > span {
        width: max-content;
        padding: 1.3vh 0;
        border-bottom: 2px solid #2ac092;
      }
    }

    .video-list {
      width: 95%;
      margin: 0 auto;
      //   border-top: 2px solid #e6e6e6;

      .video-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5% 0;
        width: 98%;
        margin: 0 auto;
        border-bottom: 1px solid #e6e6e6;
        cursor: pointer;
        font-size: 1vw;
        color: #333333;
        user-select: none;

        > div:nth-child(1) {
          display: flex;
          align-items: center;

          > img {
            margin-right: 0.2vw;
          }
        }
        > div:nth-child(2) {
          > img {
            width: 1vw;
            height: 2vh;
          }
        }
        .class-hour {
          font-size: 0.6vw;
          padding: 0.3vh 0.6vw;
          background: #defcf3;
          color: #2ac092;
          border: 1px solid;
          border-radius: 5px;
          margin: 0 0.5vw;
        }
      }

      .video-item:hover {
        color: #2ac092;
      }
    }
  }
}
</style>